<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="订单付款"></com-nav-bar>
		</view>
		
		
		<view style="background-repeat: no-repeat;background-size: contain;min-height: 1500rpx;" :style="{backgroundImage:'url(https://cos.zaituan.com.cn/uploads/images/original/20240823/88b0461b75e85ca517515682bb85dce3.jpg)',marginTop:fixedTopHeight+'px'}">
			<view style="padding: 100rpx 40rpx 0;" v-if="previewData.order_no">
				<view style="background-color: #ffffff;border-radius: 10rpx;padding: 0 20rpx;">
					<view style="display: flex;justify-content: space-between;align-items: center; padding: 30rpx 5rpx;font-size: 10pt;color: #000;border-bottom: 1rpx solid #f2f2f2;">
						<text>账户余额:</text>
						<view><text style="font-size: 13pt;margin-right: 10rpx;">{{previewData.balance}}</text>元</view>
					</view>
					<view style="padding: 43rpx 0;display: flex;flex-direction: column;align-items: center;margin-bottom: 40rpx;">
						<view style="font-size: 9pt;font-weight: 600;margin-bottom: 20rpx;color: #000;">支付金额</view>
						<view style="font-size: 16pt;font-weight: 600;margin-bottom: 20rpx;" :style="{color:'#FF7104'}">
							<text style="font-weight: 500;font-size: 12pt;margin-right: 10rpx;">&yen;</text>{{previewData.amount}}
						</view>
						<view style="font-size: 10pt;color: #000;margin-bottom: 20rpx;">订单编号：{{previewData.order_no}}</view>
						<view style="font-size: 9pt;color: #c60000">请于{{formatTimeToStr(previewData.timeout)}}前完成付款，超时将关闭订单。</view>
					</view>
					
					<view style="font-size: 11pt;color:#000;font-weight: 600;padding: 20rpx;">请选择：</view>

					<view style="padding: 30rpx;">
						<u-radio-group v-model="checkedPayType" style="width: 100%;">
							<view v-for="(item,index) in previewData.supportPayTypes" :key="index" v-if="item" @click="checkedPayType = index" style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;width: 100%;">
								<view style="display: flex;align-items: center;">
									<image style="width: 40rpx;height: 40rpx;margin-right: 30rpx;" :src="'https://cos.zaituan.com.cn/admin/images/'+index+'.png'"></image>
									<view>{{index | payTypeDesc}}</view>
								</view>
								<u-radio :name="index"></u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>
				
				<view style="color: #fff;background: #bc0100;padding: 28rpx 0;text-align: center;border-radius: 45px;font-size: 10pt;letter-spacing: 2px;margin-top: 45px;" 
					@click="confirmPay" :style="{background:'#FF7104'}">确认支付</view>
				
				<view v-if="previewData.order_user_id === previewData.user_id" @click='toHelpPay' style="color: #FF7104;font-size: 10pt;text-align: right;margin-top: 40rpx;margin-right: 20rpx;">找朋友付</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
	let that;
	export default {
		data(){
			return {
				order_no: '',
				fixedTopHeight:0,
				previewData:{
					amount: 0,
					balance: 0,
					is_pwd: 0,
					order_no: "",
					supportPayTypes: {
						hxtOpenPay: 1, 
						balance: 0,
					},
					timeout: 0
				},
				checkedPayType:'hxtOpenPay',

			}
		},
		beforeCreate(){
			that = this;
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		onLoad(opt){
			that.order_no = opt.order_no ?? '';
			if( !that.order_no ){
				return that.$http.toast("请求参数异常~");
			}
			that.paymentPreview();
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			},
		},
		filters:{
			payTypeDesc(type){
				const typeMaps = {
					'hxtOpenPay' : '微信支付宝支付',
					'balance' : '兰亭余额支付',
					'hxtBalancePay' : '恒信通余额支付'
				}
				return typeMaps[type] ?? '未知类型';
			}
		},
		methods:{
			back(){
				this.navBack();
			},
			
			async paymentPreview(){
				const res = await that.$http.request({
					url: that.$api.v2Order.paymentPreview,
					method: 'post',
					data:{order_no:that.order_no},
					showLoading:true,
				});
				if(res.code !== 0){
					return that.$http.toast(res.msg);
				}
				that.previewData = res.data;
			},
			async confirmPay(){
				let url = '';
				if(that.checkedPayType == 'balance'){
					url = that.$api.v2Order.balancePay;
				}
				if(that.checkedPayType == 'hxtOpenPay'){
					url = that.$api.v2Order.hxtOpenPay;
				}
				const res = await that.$http.request({
					url,
					method: 'post',
					data:{order_no:that.order_no},
					showLoading:true,
				});
				if(res.code !== 0){
					return that.$http.toast(res.msg);
				}
				
				if(that.checkedPayType == 'balance'){
					that.$http.toast("支付成功~");
					await sleep(2000);
				}
				
				if(res.data.redirect_type == 'redirect'){
					window.location.href = res.data.redirect_url;
				}else{
					uni.navigateTo({url:res.data.redirect_url});
				}
				
			},
			
			//找朋友付款
			async toHelpPay(){
				uni.showModal({
					title: '温馨提示',
					content: '您确定要生成亲友代付的付款链接吗？生成后您仍可以前往订单列表自己付款。',
					confirmText:'确定',
					cancelText:'我再想想',
					success: async function (res) {
						if (res.confirm) {
							let response = await that.$http.request({
								url: that.$api.v2Order.helpOrderCreate,
								showLoading: true,
								method: 'post',
								data: {order_no:that.order_no}
							});
							if(response.code != 0){
								uni.showToast({icon:'none',title:response.msg});
								return ;
							}
							uni.navigateTo({
								url: '/pages/order/payment/help_pay?type=1&order_no='+that.order_no
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.cart-bg {
		position: absolute;
		width: 100%;
		background-size: cover;
		height: 320rpx;
	}
	.mainContent {
		z-index: 999;
		position: relative;
		width: 690rpx;
		margin: 118rpx auto 0;
	}
</style>